Icon Animations in Android Applications - Complete Course

Explore Adobe XD as a powerful vector graphics tool for UX/UI design and icon creation, then learn to craft and animate icons for Android applications.

Explore the Adobe XD interface, templates for web, iPhone, iPad, and cloud documents, and master essential tools from rectangle to pen, text, and vector paths.

Export the vector from Adobe XD by forming a moon-shaped silhouette from circles and subtracting shapes, then rename and export in the SPG format for use in this course.

Master Adobe XD keyboard shortcuts to speed design, covering core tools (select, rectangle, ellipse, line, pen, text, zoom, color picker) and file, export, import, group, and undo and redo commands.

Explore four free vector icon resources online—Iowan icons, the non project, The icon monster, and The Flat icons. Download svg icons and icon packs for Android projects.

Explore shapeshifter, a web app for vector animations, and learn its interface, import/export of vector assets, and animating group and path elements with rotation, pivot, and timeline controls.

Master combining multiple group animations into one cohesive motion by rotating, translating X and Y, and scaling with precise timing, duration, and interpolation.

Explore path morphing by transforming a circle into a rectangle using shape shifter, path data, and auto fix to align shapes, with optional delays and split tools.

learn to animate path properties by creating a center circle and applying color and alpha transitions, stroke width changes, and stroke disappearance in a shape shifter project.

Explore advanced path animations using trim path start, end, and offset to create dynamic checkmark strokes; adjust duration and interpolation, combine paths, and practice for clip path effects.

learn how to create a clip path inside a shape shifter beta version, build a cup and water wave vector, and apply translate y animation with a vector mask.

Save your existing project with the shapeshifter extension, then import it later by opening the saved file; any animations in the timeline remain visible after loading.

Export your animation from shapeshifter by selecting the animated vector file, preview a simple alpha fade-out, and review the file contents in Android Studio.

Design a checkmark vector and circle in Adobe XD, using the ellipse and pen tools, stroke adjustments, alignment guides, and naming to create a reusable vector file for icon animations.

Export and import the checkmark vector into shapeshifter, adjust stroke width and size, align with the circle, and animate rotation and trim paths over three seconds.

Learn to implement a checkmark animation in android studio by importing a shapeshifter vector, wiring an image view and a go button with constraints, and resolving api level 21 warnings.

Implement the checkmark animation logic in Android Studio by wiring an image view and button, revealing animated vector drawable on click and redirecting after four seconds to a second activity.

Animate Instagram heart icon in shape shifter using outline and filled vectors on 46 by 42 canvas, pivot at 23,21, scale 0.9 to 0.5, then back, filling red.

Animate a full heart vector with shape shifter for an Instagram style like, featuring path setup, group scale, stroke color shift from red to black, and a fill alpha reveal.

Design a heart animation in Android Studio using animated vector drawables, add xmls to drawable, fix API warnings, and center a scalable image view for playback.

Implement the Instagram heart animation logic in Android Studio by attaching an onClick listener to the image view, using animated vector drawables with a playAnimations method for compatibility.

Create a three-circle loading vector in Shape Shifter, align the circles, and apply translate animations with precise timing and easing to prepare for Android Studio integration.

Implement loading animation logic with an animated vector drawable, toggle visibility on click, and loop the animation using an animation callback, handling API levels 21 and 23.

Design and animate a dropdown arrow vector with shapeshifter, morphing between up and down via path data animations. Export two animated vector drawables for Android.

Copy dropdown arrows animations into your Android Studio layout, connect constraints, adjust padding and text views, and prepare string resources as you implement the dropdown arrows animations.

Implement the dropdown arrows logic in Android Studio by handling click events, toggling visibility, and playing fade and translate animations with animated vector drawables and animation resources.

Animate thumbs up and thumbs down icons with shapeshifter, export animated vector files, adjust stroke and fill colors, apply scale and color changes, then prepare for Android app integration.

Implement thumbs up/down animation logic in Android Studio by importing copied animations, wiring image views with on click listeners, and cycling animation resources via a switch to play animations.